<template>
	<view class="examdetail">
		<view class="top-box">
			<view>店长：{{allInfo.shopownerName || ''}}</view>
			<view>店名：{{allInfo.shopName || ''}}</view>
			<view>共{{allInfo.questionList.length || 0}}道题 已完成{{currentindexpage}}道</view>
		</view>
		<view class="examtypes">
			<swiper class="examtypes-swiper" :current="currentindexpage" @change="change">
				<template v-for="(itemcard,indexcard) in allInfo.questionList">
					<swiper-item v-if="itemcard.questionType == 0">
						<view class="swiper-item">
							<listscroll>
								<view class="exam-content">
									{{indexcard+1}}.{{itemcard.questionText}}
									<text style="color: #2586FF; padding-left: 20rpx;">(单选)</text>
								</view>
								<view class="exam-optionlist">
									<view @click="changChecked(index,itemcard.questionType,item)" :class="{ examactive: item.checked }"
									 v-for="(item, index) in itemcard.optionList" class="exam-option_item">
										<view class="exam-option_item_option">
											{{index == 0?'A':''}}
											{{index == 1?'B':''}}
											{{index == 2?'C':''}}
											{{index == 3?'D':''}}
										</view>
										<view class="exam-option_item_text">
											{{item.optionText}}
										</view>
									</view>
								</view>
							</listscroll>
						</view>
					</swiper-item>
					<swiper-item v-if="itemcard.questionType == 1">
						<view class="swiper-item">
							<listscroll>
								<view class="exam-content">
									{{indexcard+1}}.{{itemcard.questionText}}
									<text style="color: #2586FF; padding-left: 20rpx;">(多选)</text>
								</view>
								<view class="exam-optionlist">
									<!-- 正常答题 -->
									<view @click="changChecked(index,itemcard.questionType,item)" :class="{ examactive: item.checked }"
									 v-for="(item, index) in itemcard.optionList" class="exam-option_item">
										<view class="exam-option_item_option">
											{{index == 0?'A':''}}
											{{index == 1?'B':''}}
											{{index == 2?'C':''}}
											{{index == 3?'D':''}}
										</view>
										<view class="exam-option_item_text">
											{{item.optionText}}
										</view>
									</view>
								</view>
								<!-- 考试解析 -->
							</listscroll>
						</view>
					</swiper-item>
				</template>
			</swiper>
		</view>
		<!--按钮 -->
		<view class="exam-countdown">
			<view v-if="currentindex == allInfo.questionList.length-1" class="exam-coundown_page">
				<view @click="noticeSubmit()" class="exam-page_btn-long">
					完成
				</view>
			</view>
			<view v-else-if="currentindex == 0" class="exam-coundown_page">
				<view @click="pageswitch(1)" class="exam-page_btn-long">
					下一题
				</view>
			</view>
			<view v-else class="exam-coundown_page">
				<view @click="pageswitch(0)" class="exam-page_btn">
					上一题
				</view>
				<view @click="pageswitch(1)" class="exam-page_btn">
					下一题
				</view>
			</view>
		</view>
		<!-- 答题完成弹窗开始 -->
		<view class="wszz" v-show="isOk">
			<view class="zhezhao"></view>
			<view class="count">
				<view class="title">
					<view class="icon" >
						<image style="width: 100%;height: 100%;" mode="widthFix" src="https://wechat-pictures-1301970825.file.myqcloud.com/bang.png"></image>
					</view>
					<text>恭喜获得</text>
					<view class="icon timg">
						<image style="width: 100%;height: 100%;" mode="widthFix" src="https://wechat-pictures-1301970825.file.myqcloud.com/bang.png"></image>
					</view>
					</view>
					<view class="coin-text"><text class="coin-text-num">{{allInfo.integral}}</text>个积分（约{{allInfo.integral/100}}元）</view>
					<view @click="toIndex()" class="button">查看更多视频</view>
					<view class="msg">{{num}}s 后，前往人康课堂</view>
			</view>
		</view>
		<!-- 答题完成弹窗结束 -->
		<!-- 失败弹窗开始 -->
		<view class="wszz" v-show="isNo">
			<view class="zhezhao"></view>
			<view class="count">
				<view class="title">提示</view>
					<view class="con-main">已提交或问卷调查已结束</view>
					<view @click="toIndex()" class="button">查看更多视频</view>
					<view class="msg">{{num}}s 后，前往人康课堂</view>
			</view>
		</view>
		<!-- 失败弹窗结束 -->
		<!-- 提示框开始 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog 
			type="warn" 
			cancelText="取消" 
			confirmText="确认" 
			title="提示" 
			:content="alertMessage"
			@confirm="examsubmit()">
			</uni-popup-dialog>
		</uni-popup>
		<!-- 提示框结束 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				answerInfo: {}, // 答题数据
				allInfo:{}, // 答题的所有数据
				currentindexpage: 0, // 手动滑屏下标
				currentindex: 0, // 手动切换题目下标
				coundown_end: false, // 倒计时结束class控制
				answerlist: [], // 记录答案
				currlist: [], // 最终答案
				isOk: false, // 是否展示填写完成
				isNo: false, // 是否展示失败弹窗
				num:20, // 倒计时
				alertMessage: '', // 提示框标语
				objectInterval: {} ,// 倒计时对象
				video_id: '',
			};
		},
		onLoad(req) {
			this.video_id = req.video_id?req.video_id:1248;
			this.authQuestion()
			// 获取所有答题数据
			this.getList()
		},
		onBackPress(e) {},
		// 监听页面卸载
		onUnload() {},
		components: {

		},
		methods: {
			// 验证是否需要跳转到视频答题
			authQuestion(){			
				var _this = this;
				var data = {};
				_this.$NoteApi.doRequest("post", "investigate/needInvestigate", data).then(res => {
					if(res.data.code == 0){
						if(res.data.data === null){
							// _this.toEnd(2)
						}else{
							this.answerInfo = res.data.data
							uni.setNavigationBarTitle({title:res.data.data.investigateName})
						}
					}else{
						_this.toEnd(2)
					}
				})
			},
			// 显示成功倒计时
			showTime(){
				let that = this
				var clearSetInterval = setInterval(function(){
					 that.num=that.num-1;
					 if(that.num<=0){
						 uni.switchTab({
							 url:'/pages/sindex/index'
						 })	
						 clearInterval(clearSetInterval)
					 }
				},1000)
				this.objectInterval = clearSetInterval
			},
			// 跳转到首页
			toIndex(){
				clearInterval(this.objectInterval)
				uni.switchTab({
					 url:'/pages/sindex/index'
				})	
			},
			// 获取答题数据
			getList(){
				var data = {}
				uni.showLoading({})
				var _this = this;
				this.$NoteApi.doRequest("post", 'investigate/investigate', data).then(res => {
					/* if(res.data.data.status == 0){
						_this.isNo = true
						_this.showTime()
						return
					} */
					console.log(res.data.code)
				    if(res.data.code == 0) {
						let tempData = res.data.data
						for(let index in tempData.questionList){
							tempData.questionList[index].questionList = []
							for(let index2 in tempData.questionList[index].optionList){
								tempData.questionList[index].optionList[index2].checked = false
							}
						}
						_this.allInfo = tempData
						console.log(_this.allInfo)
				        uni.hideLoading({})
				    }
				})
			},
			noticeSubmit(type) {
				if(!this.answerlist[this.currentindexpage]){
					uni.showToast({
						title: '请先答完本题',
						icon: 'none',
						duration:3000
					})
					return
				}
				let message = '是否确认提交？'
				this.alertMessage = message
				this.$refs.alertDialog.open()
			},
			// 提交按钮点击弹出选择框
			examsubmit() {
				let currlist = []
				this.answerlist.forEach((item, index) => {
					if (item) {
						currlist.push(item)
					}
				})
				if (this.allInfo.questionList.length > currlist.length) {
					let undone = this.allInfo.questionList.length - this.currlist.length
					console.log("没答完", undone)
					uni.showToast({
						title: '还有' + undone + '题未填写',
						icon: 'none',
						duration:3000
					})
					return
				}
				// 格式化答案
				let newAnswerList = []
				let tempAnswer = {}
				for(let i = 0; i < this.answerlist.length; i++){
					for(let k = 0; k < this.answerlist[i].selectedOptionId.length; k++){
						tempAnswer = {}
						tempAnswer.questionId = this.answerlist[i].questionId
						tempAnswer.selectedOptionId = this.answerlist[i].selectedOptionId[k]
						newAnswerList.push(tempAnswer)
					}
				}
				var data = {}
				data.investigateId = this.allInfo.investigateId
				data.questionList = newAnswerList			
				uni.showLoading({})
				var _this = this;
				this.$NoteApi.doRequest("post", 'investigate/submitInvestigate', data,'json',false ).then(res => {
				    if(res.data.code == 0) {
						_this.toEnd(1)
				    }
				})
			},
			// 跳转到完成页面
			toEnd(type){
				uni.reLaunch({
					 url:'/pages/newAnswer/quesEnd?video_id='+this.video_id+'&type=' + type
				})	
			},
			// 卡片滑动
			change(e) {
				const {
					current
				} = e.detail
				console.log(current)
				this.currentindex = current
				this.currentindexpage = current
			},
			// 单选
			changChecked(index, type, item) {
				if (type == 0) {
					if (this.allInfo.questionList[this.currentindex].optionList[index].checked) {
						this.allInfo.questionList[this.currentindex].optionList[index].checked = false;
						this.answerlist[this.currentindexpage] = undefined
						return
					}
					this.allInfo.questionList[this.currentindex].optionList.forEach((item, index) => {
						item.checked = false;
					})
					this.allInfo.questionList[this.currentindex].optionList[index].checked = !this.allInfo.questionList[this
						.currentindex].optionList[index].checked;
					this.answerlist[this.currentindexpage] = ({
						"questionId": this.allInfo.questionList[this.currentindex].questionId,
						"selectedOptionId": [item.optionId]
					})
				} else if (type == 1) {
					this.allInfo.questionList[this.currentindex].optionList[index].checked = !this.allInfo.questionList[this
						.currentindex].optionList[index].checked
					let indexarr = []
					this.allInfo.questionList[this.currentindex].optionList.forEach((item, index) => {
						if (item.checked) {
							indexarr.push(item.optionId)
						}
					})
					// console.log(indexarr);
					if (indexarr.length == 0) {
						this.answerlist[this.currentindexpage] = undefined
					} else {
						this.answerlist[this.currentindexpage] = ({
							"questionId": this.allInfo.questionList[this.currentindex].questionId,
							"selectedOptionId": indexarr
						})
					}

				}
			},
			// 题卡切换
			pageswitch(index) {
				console.log(this.currentindexpage);
				if(!this.answerlist[this.currentindexpage]){
					uni.showToast({
						title: '请先答完本题',
						icon: 'none',
						duration:3000
					})
					return
				}
				if (index) {
					let curlength = this.allInfo.questionList.length
					console.log(curlength);
					if (this.currentindexpage < curlength - 1) {
						this.currentindexpage = this.currentindexpage + 1
					}
				} else {
					if (this.currentindexpage > 0) {
						this.currentindexpage = this.currentindexpage - 1
					}
				}
			},
			// 分享
			onShareAppMessage(res) {
			    if (res.from === 'button') {// 来自页面内分享按钮
			      console.log(res.target)
			    }
			    return {
			      title: '问卷调研',
			      path: '/pages/newAnswer/questionnaire?video_id=' + this.video_id
			    }
			},
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
	}
	.top-box{
		background-color: #0EBC65;
		color: #ffffff;
		font-size: 32rpx;
		line-height: 60rpx;
		padding: 20rpx;
	}
	.examdetail {
		width: 100%;
		height: 100%;

		.exam-submit {
			width: 70rpx;
			height: 70rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #00aaff;
			margin: 0;
			padding: 0;
			background-color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 28rpx;
		}

		.examtypes {
			width: 100%;
			height: 90%;

			.examtypes-swiper {
				height: 100%;
				width: 100%;

				.swiper-item {
					width: 100%;
					padding: 0 30rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #909090;
					height: 100%;

					.exam-type {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #909090;
						padding-top: 44rpx;
					}

					.exam-content {
						width: 100%;
						font-size: 36rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #202020;
						line-height: 44rpx;
						margin-top: 40rpx;
					}

					.exam-optionlist {
						padding-top: 44rpx;
						display: flex;
						flex-direction: column;
						padding-bottom: 15rpx;

						.exam-option_item {
							margin-bottom: 24rpx;
							width: 100%;
							min-height: 98rpx;
							background: #F6F6F6;
							border-radius: 10rpx;
							display: flex;
							justify-content: flex-start;
							align-items: center;
							box-sizing: border-box;
							border: 2rpx solid #FFFFFF;

							.exam-option_item_option {
								width: 48rpx;
								height: 48rpx;
								background: #F6F6F6;
								border: 2rpx solid #B2B2B2;
								border-radius: 50%;
								display: flex;
								justify-content: center;
								align-items: center;
								margin-left: 30rpx;

							}

							.exam-option_item_text {
								margin-left: 44rpx;
								width: 535rpx;
								padding: 30rpx 0;
								font-size: 36rpx;
								color: #333333;
							}
						}

						.examactive {
							background: #F6F6F6;
							border: 2rpx solid #0EBC65;

							.exam-option_item_option {
								background-color: #0EBC65;
								color: #FFFFFF;
								border: 2rpx solid #0EBC65;
							}
						}
					}

					.exam-input {
						width: 100%;
						// height: 800rpx;
						background: #F6F6F6;
						box-sizing: border-box;
						border-radius: 10rpx;
						margin-top: 44rpx;
						margin-bottom: 44rpx;

						textarea {
							width: 94%;
							// height: 760rpx;
							padding: 20rpx 3%;
						}

						.textarea {
							width: 94%;
							padding: 20rpx 3%;
						}
					}

					.examdetail-analysis {
						width: 690rpx;

						.examdetail-analysis_title {
							width: 100%;
							font-size: 20rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #00aaff;
							line-height: 44rpx;
						}

						.exammistake {
							color: #00aaff;
						}

						.examdetail-analysis_content {
							width: 92%;
							// height: 212rpx;
							background: #EEEEEE;
							border-radius: 10rpx;
							margin-top: 23rpx;
							padding: 4%;

							.examdetail-analysis_content_op {
								width: 100%;
								display: flex;
								justify-content: flex-start;
								font-size: 20rpx;
								color: #202020;

								.title {
									width: 18%;
								}

								.text {
									width: 82%;
									font-size: 20rpx;
									font-family: PingFang SC;
									font-weight: 500;
									line-height: 30rpx;

								}

								.answer {
									color: #00aaff;
								}

							}
						}
					}
				}


			}


		}

		.exam-countdown {
			position: fixed;
			bottom: 0;
			width: 100%;
			display: flex;
			flex-direction: column;
			// border-top: 2rpx solid #000000;

			.exam-coundown_time {
				width: 100%;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-weight: bold;
				text-align: center;
				color: #00aaff;
				margin: 22rpx 0;
				display: flex;
				justify-content: center;
			}

			.coundown_end {
				color: $uni-color-error;
			}

			.exam-coundown_page {
				width: 100%;
				display: flex;
				justify-content: space-around;
				align-items: center;
				margin: 22rpx 0 36rpx 0;

				.exam-page_length {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #202020;
				}

				.exam-page_btn {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #ffffff;
					background-color: #0EBC65;
					width: 300rpx;
					height: 90rpx;
					line-height: 90rpx;
					border-radius: 10rpx;
					text-align: center;
				}
				.exam-page_btn-long{
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #ffffff;
					background-color: #0EBC65;
					width: 650rpx;
					height: 90rpx;
					line-height: 90rpx;
					border-radius: 10rpx;
					text-align: center;
				}
			}
		}

		.exam-card {
			position: relative;
			width: 100%;
			height: 980rpx;
			background: #FFFFFF;
			border-radius: 30rpx 30rpx 0px 0px;
			display: flex;
			flex-direction: column;
			align-items: center;

			.exam-card_title {
				width: 92%;
				padding: 0 4%;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #202020;
				padding: 43rpx 0;
			}

			.exam-card_list {
				width: 92%;
				padding: 0 4%;
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;

				.exam-card_item {
					width: 80rpx;
					height: 80rpx;
					color: #909090;
					border-radius: 50%;
					margin: 17rpx;
					border: 2rpx solid #B2B2B2;
					display: flex;
					justify-content: center;
					align-items: center;
					box-sizing: border-box;
				}

				.exam-card_blue {
					background: rgba( #00aaff,  0.15);
					border: 2rpx solid rgba( #00aaff, 0.15);
					color: #00aaff;
				}

				.exam-card_bluecur {
					background: rgba( #00aaff,  0.35);
					border: 2rpx solid rgba( #00aaff, 0.35);
					color: #00aaff;
				}

				.exam-card_graycur {
					background: #F0F0F0;
				}

				.exam-card_red {
					background: rgba($color: $uni-color-error, $alpha: 0.15);
					border: 2rpx solid rgba($color: $uni-color-error, $alpha: 0.15);
					color: $uni-color-error;
				}

				.exam-card_redcur {
					background: rgba($color: $uni-color-error, $alpha: 0.35);
					border: 2rpx solid rgba($color: $uni-color-error, $alpha: 0.35);
					color: $uni-color-error;
				}
			}

			.exam-card_off {
				position: absolute;
				bottom: 0;
				width: 100%;
				height: 98rpx;
				background: #FFFFFF;
				color: #202020;
				font-size: 32rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-top: 2rpx solid #EEEEEE;
			}
		}
	}
	/* 答题完成弹窗开始 */
	.zhezhao{
		   width: 100vw;
		   height: 100vh;
		   position: fixed;
		   left: 0;
		   top: 0;
		   background-color: #000000;
		   opacity: 0.5;
		   z-index: 9;
	}
	.count{
		   width: 664upx;
		   /* height: 700upx; */
		   position: fixed;
		   top: 50%;
		   left: 50%;
		   transform: translate(-50%,-50%);
		   border-radius: 24upx;
		   background-color: #FFFFFF;
		   background-image: url(https://wechat-pictures-1301970825.file.myqcloud.com/baijing.png);
		   background-size: 100% auto;
		   z-index: 100;
		   box-sizing: border-box;
		   padding: 0 64upx;
		   padding-bottom: 64upx;
	}
	.count .cha{
		   background-color: #CCCCCC;
		   border: 2upx solid #FFFFFF;
		   border-radius: 50%;
		   position: absolute;
		   top: -30upx;
		   right: -30upx;
		   width: 60upx;
		   height: 60upx;
		   display: flex;
		   justify-content: center;
		   align-items: center;
	}
	.title{
		   width: 100%;
		   text-align: center;
		   margin-top: 66upx;
		   font-size: 34upx;
		   font-weight: 700;
		   height: 50upx;
		   display: flex;
		   justify-content: center;
		   align-items: center;
	}
	.title .icon{
		   width: 40upx;
		   height: 40upx;
	}
	.title text{
		   margin: 0 30upx;
	}
	.con{
		   width: 100%;
		   margin: 0 0 30rpx 0;
		   font-size: 28upx;
		   color: #565656;
	}
	.coin-text{
		width: 100%;
		text-align: center;
		margin: 80rpx 0;
		color: #0EBC65;
		font-size: 32rpx;
	}
	.coin-text-num{
		font-size: 42rpx;
		font-weight: bold;
	}
	.msg{
		   width: 100%;
		   text-align: center;
		   font-size: 28upx;
		   color: #999999;
		   margin-top: 24upx;
	}
	.timg{
		   transform: rotatey(180deg);
	}
	.button{
   	   width: 520upx;
   	   height: 80upx;
   	   background: #0EBC65;
   	   border-radius: 40upx;
   	   font-size: 32upx;
   	   font-weight: 500;
   	   line-height: 80upx;
   	   text-align: center;
   	   margin: 0 auto;
   	   color: #FFFFFF;
   }
   .con-main{
	   height: 160rpx;
	   line-height: 160rpx;
	   text-align: center;
	   font-size: 36rpx;
   }
	/* 答题完成弹窗结束 */
</style>
